import React, { useState, useEffect } from "react";
import { Form, Input, Button, Select, message } from "antd";
import { IAddStudent } from "@/interface/student";
import api from "@/fetch";

import "./index.less";

const { Option } = Select;

const AddStudent: React.FC<{
  isEdit?: boolean;
  student?: IAddStudent;
  editSuccess?: () => void;
}> = (props) => {
  const { isEdit = false, student = null } = props;
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values: IAddStudent) => {
    try {
      setLoading(true);
      console.log(values);
      if (!isEdit) {
        await api.post("/api/v1/admin/student/import-student-info", {
          studentSaveList: [values],
        });
        form.resetFields();
        message.success("添加学生成功");
      } else {
        await api.post("/api/v1/admin/student/update", {
          studentId: student?.studentId,
          ...values,
        });
        form.resetFields();
        props.editSuccess();
        message.success("编辑学生成功");
      }
    } catch (error) {
      if (!isEdit) {
        message.error(error?.message || "添加学生失败");
      } else {
        message.error(error?.message || "编辑学生失败");
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (isEdit) {
      form.setFieldsValue(student);
    }
  }, []);

  useEffect(() => {
    if (isEdit) {
      form.setFieldsValue(student);
    }
  }, [student]);

  return (
    <div className="add-student-container">
      {!window.useData.getState().userInfo?.token && (
        <h1>没有登录，发送请求都是失败的噢</h1>
      )}
      <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        onFinish={onFinish}
      >
        <Form.Item
          label="学号"
          name="studentNumber"
          rules={[{ required: true, message: "请输入学号" }]}
        >
          <Input className="custom-input" />
        </Form.Item>
        <Form.Item
          label="姓名"
          name="studentName"
          rules={[{ required: true, message: "请输入姓名" }]}
        >
          <Input className="custom-input" />
        </Form.Item>
        {!isEdit && (
          <Form.Item
            label="学校id"
            name="schoolId"
            rules={[{ required: true, message: "请输入学校id" }]}
          >
            <Input className="custom-input" />
          </Form.Item>
        )}
        <Form.Item label="身高(cm)" name="height">
          <Input type="number" className="custom-input" />
        </Form.Item>
        <Form.Item label="体重(kg)" name="weight">
          <Input type="number" className="custom-input" />
        </Form.Item>
        <Form.Item label="性别" name="gender">
          <Select style={{ width: "300px" }} placeholder="请选择性别">
            <Option style={{ width: "290px" }} value={0}>
              男
            </Option>
            <Option style={{ width: "290px" }} value={1}>
              女
            </Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="家长手机号"
          name="parentPhone"
          rules={[{ required: true, message: "请输入家长手机号" }]}
        >
          <Input className="custom-input" />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
          <div className="btn-center">
            <Button type="primary" htmlType="submit" loading={loading}>
              提交
            </Button>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
};

export default AddStudent;
